<template>
    <div class="table">
        <div class="container">
            <!--搜索-->
            <div class="handle-box">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"
                                  @keyup.enter.native="search">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-button type="primary" icon="search" @click="search">搜索</el-button>
                    </el-col>
                    <el-col :span="12">
                        <div style="font-size: 12px;color: #999;">
                            <span style="font-size: 20px">涉及文档数约为</span><span style="padding: 0 10px">≈</span><span
                            style="font-size: 20px">{{Quantity}}</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>


        <div class="container">
            <el-row :gutter="20">
                <el-col :span="24">
                    <Statistics></Statistics>
                </el-col>
            </el-row>
        </div>


        <div class="container">
            <el-row :gutter="20">
                <!--柱状图-->
                <el-col :span="12">
                    <Pillar></Pillar>
                </el-col>
                <!--饼图-->
                <el-col :span="12">
                    <Pier></Pier>
                </el-col>
            </el-row>
        </div>
        <div class="container">
            <el-row :gutter="20">
                <el-col :span="24">
                    <Inof></Inof>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import Pillar from './pillar.vue';
    import Pier from './pier.vue';
    import Inof from './inof.vue';
    import Statistics from './statistics.vue';

    export default {
        components: {
            Pillar, Pier, Inof, Statistics
        },
        data() {
            return {
                select_word: '',
                Quantity: 0,
            }
        },
        methods: {
            search() {

            },
        }
    }

</script>

<style scoped>
    .container {
        margin: 10px 0;
    }

    .handle-box {
        margin-bottom: 20px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
</style>
